<template>
	<view>
		<uv-popup ref="popup" mode="bottom" round="32rpx">
			<view class="device-filter-pop-layout">
				<view class="device-filter-pop-header">筛选机具</view>
				<scroll-view class="scrollView" scroll-y>
					<view class="scroll-container">
						<!-- 绑定状态 -->
						<view class="scroll-group">
							<view class="scroll-group-header">绑定状态</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in bindStatusList" :key="item.id" @tap="didSelectBindStatus(item)">
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
						<!-- 激活状态 -->
						<view class="scroll-group">
							<view class="scroll-group-header">激活状态</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in activeStatusList" :key="item.id" @tap="didSelectActiveStatus(item)">
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
						<!-- 归属机构 -->
						<view class="scroll-group" v-if="channelStore.channelType == 'HHB'">
							<view class="scroll-group-header">归属机构</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in channelList" :key="item.code" @tap="didSelectChannelType(item)">
									<text>{{item.name}}</text>
								</view>
							</view>
						</view>
						<!-- 产品政策 -->
						<view class="scroll-group">
							<view class="scroll-group-header">产品政策</view>
							<view class="scroll-group-list">
								<view class="scroll-group-list-item" :class="[item.isSelect ? 'scroll-group-list-item-select' : '']" v-for="item in policyList" :key="item.policyId" @tap="didSelectPolicyStatus(item)">
									<text>{{item.policyName}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="device-filter-pop-bottom">
					<text @tap="close">取消</text>
					<text @tap="submit">确定</text>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { getAgentPolicy, getSystemParams } from '@/common/api/api.js'
	import { useChannelStore } from '@/common/stores'
	const channelStore = useChannelStore()
	const popup = ref(null)
	const emits = defineEmits(['filterResult'])
	// 绑定状态
	const bindStatusList = ref([])
	// 激活状态
	const activeStatusList = ref([])
	// 政策列表
	const policyList = ref([])
	// 归属机构列表
	const channelList = ref([])
	const open = (bindStatus = '', activeStatus = '', channelType = '', policyId = '') => {
		getBindStatusData(bindStatus)
		getActiveStatusData(activeStatus)
		if (channelStore.channelType == 'HHB') {
			Promise.all([
				getChannelListData(channelType),
				getFilterPolicyData(policyId)
			])
		} else {
			getFilterPolicyData(policyId)
		}
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	//选择绑定状态
	const didSelectBindStatus = (item) => {
		bindStatusList.value.forEach((model) => {
			model.isSelect = item.id == model.id
		})
	}
	//选择激活状态
	const didSelectActiveStatus = (item) => {
		activeStatusList.value.forEach((model) => {
			model.isSelect = item.id == model.id
		})
	}
	//选择归属机构
	const didSelectChannelType = (item) => {
		channelList.value.forEach((model) => {
			model.isSelect = item.code == model.code
		})
	}
	//选择产品政策状态
	const didSelectPolicyStatus = (item) => {
		policyList.value.forEach((model) => {
			model.isSelect = item.policyId == model.policyId
		})
	}
	//获取绑定状态列表
	const getBindStatusData = (bindStatus) => {
		bindStatusList.value = [{
				name: '全部',
				id: '',
				isSelect: true
			},
			{
				name: '已绑定',
				id: '1',
				isSelect: false
			},
			{
				name: '未绑定',
				id: '0',
				isSelect: false
			}
		]
		bindStatusList.value.forEach(item => {
			item.isSelect = item.id == bindStatus
		})
	}
	//获取激活状态列表
	const getActiveStatusData = (activeStatus) => {
		activeStatusList.value = [{
			name: '全部',
			id: '',
			isSelect: true
		}, {
			name: '已激活',
			id: '1',
			isSelect: false
		}, {
			name: '未激活',
			id: '2',
			isSelect: false
		}]
		activeStatusList.value.forEach(item => {
			item.isSelect = item.id == activeStatus
		})
	}
	// 获取归属机构列表
	const getChannelListData = async (channelType) => {
		const res = await getSystemParams({ categoryCode: 'HhbChannel' })
		channelList.value = res.result
		channelList.value.unshift({ name: '全部', code: '', isSelect: true })
		channelList.value.forEach(item => {
			item.isSelect = item.code == channelType
		})
	}
	// 获取筛选政策数据
	const getFilterPolicyData = async (policyId) => {
		const res = await getAgentPolicy()
		policyList.value = res.result
		policyList.value.unshift({ policyName: '全部', policyId: '', isSelect: true })
		policyList.value.forEach(item => {
			item.isSelect = item.policyId == policyId
		})
	}
	// 确认
	const submit = () => {
		const bindRes = bindStatusList.value.filter(item => item.isSelect)
		const activeRes = activeStatusList.value.filter(item => item.isSelect)
		const policyRes = policyList.value.filter(item => item.isSelect)
		let channelType = ''
		if(channelStore.channelType == 'HHB'){
			const channelRes = channelList.value.filter(item => item.isSelect)
			channelType = channelRes[0].code
		}
		emits('filterResult', { bindStatus: bindRes[0].id, activeStatus: activeRes[0].id, policyId: policyRes[0].policyId ,channelType})
		close()
	}
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.device-filter-pop-layout {
		.device-filter-pop-header {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			padding: 30rpx;
		}

		.scrollView {
			height: 800rpx;

			.scroll-container {
				padding: 30rpx;

				.scroll-group-header {
					padding-bottom: 30rpx;
				}

				.scroll-group-list {
					display: flex;
					flex-wrap: wrap;

					.scroll-group-list-item {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 50rpx;
						height: 68rpx;
						border-radius: 34rpx;
						background-color: #F5F7FA;
						margin-right: 30rpx;
						color: $xh-color-6;
						font-size: 26rpx;
						margin-bottom: 30rpx;
					}

					.scroll-group-list-item-select {
						color: #fff;
						background-color: $xh-theme-color;
					}
				}
			}
		}

		.device-filter-pop-bottom {
			display: flex;
			align-items: center;

			text {
				flex: 1;
				text-align: center;
				color: #fff;
				height: 88rpx;
				line-height: 88rpx;
			}

			text:nth-child(1) {
				background-color: #fff;
				color: $xh-color-3;
				border-top: 1px solid #eee;
			}

			text:nth-child(2) {
				background-color: $xh-theme-color;
				border-top: 1px solid $xh-theme-color;
			}
		}
	}
</style>